<!--
	项目通用头像组件
	author yjl
-->
<template>
	<view
		class="avatar center"
		:style="{
			'width': `${2*size}rpx`,
			'height': `${2*size}rpx`,
			'background-color': bgColor,
			'border-radius': circle ? '50%' : '8px',
			'padding': radius ? '3px' : '0'
		}"
		@click="onclickImg"
	>
		<u-image
			class="img"
			:width="`${2*size}rpx`"
			:height="`${2*size}rpx`"
			lazy-load
			:border-radius="circle ? '50%' : '0'"
			:src="src || LOGO"
			mode="aspectFill"
			:fade="false"
		/>
	</view>
</template>

<script>
import { LOGO } from '@/static/staticData'
export default {
  name: 'aha-avatar',
  props: {
    src: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 70
    },
    bgColor: {
      type: String,
      default: ''
    },
    circle: {
      type: Boolean,
      default: false
    },
    readed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      LOGO
    }
  },
  methods: {
    /**
     * 点击图片
     */
    onclickImg() {
      if (this.readed) {
        this.$readImgs([this.src])
      } else {
        this.$emit('click')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: $primary3;
}
</style>
